<template>
<div>
  <el-row style="display: flex; justify-content: space-between;">
    <el-col>
      <div class="card-col" @click="onClick('yqrw','任务状态统计-负责项目(4)条',yqrwColumn,yqrwData)">
        <div class="card-num">1</div>
        <div class="card-bot">
          <span class="card-img"><i class="el-icon-document"></i></span>
          <span>延期任务</span>
        </div>
      </div>
    </el-col>
    <el-col>
      <div class="card-col" @click="onClick('xcfx','现存风险统计-负责项目(4)条',xcfxColumn,xcfxData)">
        <div class="card-num">2</div>
        <div class="card-bot">
          <span class="card-img"><i class="el-icon-document-add"></i></span>
          <span>现存风险</span>
        </div>
      </div>
    </el-col>
    <el-col>
      <div class="card-col" style="margin-right: 0" @click="onClick('xcwt','在建项目问题统计-负责项目(4)条',xcwtColumn,xcwtData)">
        <div class="card-num">1</div>
        <div class="card-bot">
          <span class="card-img"><i class="el-icon-tickets"></i></span>
          <span>现存问题</span>
        </div>
      </div>
    </el-col>
  </el-row>
</div>
</template>

<script>
export default {
  name: "micard",
  data(){
    return{
      yqrwColumn:[
        { prop: 'xmmc', label: '项目名称', align: 'center',fixed:'left'},
        { prop: 'rwzs', label: '任务总数', align: 'center'},
        { prop: 'db', label: '待办', align: 'center'},
        { prop: 'jxz', label: '进行中', align: 'center'},
        { prop: 'yzt', label: '已暂停', align: 'center'},
        { prop: 'yzz', label: '已终止', align: 'center'},
        { prop: 'ywc', label: '已完成', align: 'center'},
        { prop: 'yyq', label: '其中：已延期', align: 'center'},
      ],
      yqrwData:[
        {xmmc:'风光一体化防沙治沙',rwzs:'12',db:'0',jxz:'3',yzt:"1",yzz:'5',ywc:'3',yyq:'0'},
        {xmmc:'蚂蚁森林苗木栽培',rwzs:'8',db:'1',jxz:'3',yzt:"0",yzz:'0',ywc:'4',yyq:'0'},
        {xmmc:'三北六七绿化改造',rwzs:'15',db:'1',jxz:'8',yzt:"1",yzz:'2',ywc:'4',yyq:'0'},
        {xmmc:'蓝旗机器人造林',rwzs:'10',db:'0',jxz:'5',yzt:"1",yzz:'0',ywc:'4',yyq:'0'},
      ],
      xcfxColumn:[
        { prop: 'xmmc', label: '项目名称', align: 'center',fixed:'left'},
        { prop: 'fxzs', label: '风险总数', align: 'center'},
        { prop: 'bczfx', label: '不存在风险', align: 'center'},
        { prop: 'xcfx', label: '现存风险', align: 'center'},
        { prop: 'ljfx', label: '其中：临近风险', align: 'center'},
        { prop: 'xcbl', label: '现存比率', align: 'center'},
      ],
      xcfxData:[
        {xmmc:'风光一体化防沙治沙',fxzs:'12',bczfx:'0',xcfx:'12',xcbl:"100%",ljfx:'0'},
        {xmmc:'蚂蚁森林苗木栽培',fxzs:'8',bczfx:'1',xcfx:'7',xcbl:"90%",ljfx:'0'},
        {xmmc:'三北六七绿化改造',fxzs:'5',bczfx:'0',xcfx:'5',xcbl:"100%",ljfx:'0'},
        {xmmc:'蓝旗机器人造林',fxzs:'10',bczfx:'5',xcfx:'5',xcbl:"50%",ljfx:'0'},
      ],
      xcwtColumn:[
        { prop: 'xmmc', label: '项目名称', align: 'center',fixed:'left'},
        { prop: 'xcwt', label: '现存问题', align: 'center',fixed:'left'},
        { prop: 'yjj', label: '已解决', align: 'center',fixed:'left'},
        { prop: 'wtzs', label: '问题总数', align: 'center',fixed:'left'},
      ],
      xcwtData:[
        {xmmc:'风光一体化防沙治沙',wtzs:'12',xcwt:'0',yjj:'12'},
        {xmmc:'蚂蚁森林苗木栽培',wtzs:'8',xcwt:'1',yjj:'7'},
        {xmmc:'三北六七绿化改造',wtzs:'5',xcwt:'0',yjj:'5'},
        {xmmc:'蓝旗机器人造林',wtzs:'10',xcwt:'5',yjj:'5'},
      ]
    }
  },
  methods:{
    onClick(value,name,columns,tableData){
      let param = {
        value: value,
        name: name,
        columns: columns,
        tableData: tableData,
        showButton: true,
        showQuery: true
      }
      this.$emit('showTables',param)
    }
  }
}
</script>

<style scoped>
.card-col {
  background: #fff;
  border-radius: 4px;
  box-sizing: border-box;
  border: 2px solid #fff;
  margin-right: 16px;
  box-shadow: 0 0 14px 0 rgba(28, 111, 236, .15);
  height: 128px;
}

.card-col:hover{
  cursor: pointer;
  border-color: #a0ddcd;
}

.card-num {
  text-align: center;
  font-size: 40px;
  font-weight: 600;
  color: #11A983;
  margin-top: 25px;
}

.card-img {
  margin-right: 10px;
  color: #11A983;
  font-size: 21px;
}

.card-bot {
  display: flex;
  justify-content: center;
  margin-top: 5px;
}
</style>
